<template>
	<view class="p-20">
		<text v-if="val.data=='text'" class="text-black">{{val.text}}</text>
		<uv-image v-if="val.data=='img'" :src="val.description" width="100px" height="100px" mode="aspectFit"
			@click="lookImg(val.description)">
		</uv-image>
		<view class="flex items-center" v-if="val.data=='audio'" @click="playAudio(val)">
			<uni-icons type="sound" size="20"></uni-icons>
			<text class="text-black">{{val.extension}}s</text>
		</view>
		<view class="flex flex-col" v-if="val.data=='answer'">
			<view class="">

				<view class="overflow-hidden flex" style="width: 500rpx;" v-if="val.extension=='psychology'">
					<!-- <text class="text-black text-sm w-full">心理：{{val.description.addparme}}</text> -->
					<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF] text-black"
						style="font-size: 10px;">所选不适感</text>
					<view class="flex items-center w-[264rpx] h-[138rpx] border-solid border-[#E4F2FF] bg-[#525E7A]">
						<view class="flex-1 flex flex-wrap justify-center items-center text-white">
							<text
								:class="[val.description.addparme.split(',').indexOf(item.value) > -1?'item font-bold mr-10 text-[9px] active':'item font-bold mr-10 text-[9px]']"
								v-for="(item, idx) in addparmeList" :key="idx">{{item.value}}</text>
						</view>
					</view>
				</view>
				<view class="overflow-hidden flex" style="width: 400rpx;" v-else-if="val.extension=='astrolabe'"
					@click="onAstrolabe(val.description.selcard)">
					<!-- <text class="text-black text-sm w-full">星盘：{{val.description.selcard}}</text> -->
					<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF] text-black"
						style="font-size: 10px;">所选{{val.description.selcard.indexOf(',')==-1?'单盘':'合盘'}}</text>
					<view class="w-228 h-[138rpx] border-solid border-[#E4F2FF]" v-if="val.description.selcard.indexOf(',')==-1">
						<ImageBoxVue src="/static/community/single.png"></ImageBoxVue>
					</view>
					<view class="w-228 h-[138rpx] border-solid border-[#E4F2FF]" v-else>
						<ImageBoxVue src="/static/community/double.png"></ImageBoxVue>
					</view>
				</view>

				<view class="overflow-hidden flex" style="width: 500rpx;" v-else @click="handleClickTarot(val)">
					<!-- // <text class="text-black text-sm w-full">卡牌：{{val.description.deckId}}</text> -->
					<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF] text-black"
						style="font-size: 10px;">{{val.description.sdes==0?'所选数字':'所选卡牌'}}</text>
					<view class="flex w-[264rpx] h-[138rpx] border-solid border-[#E4F2FF]" v-if="val.description.sdes==0">
						<view class="flex-1 flex flex-wrap justify-center items-center bg-[#525E7A] text-white">
							<text class="font-bold mr-10 text-sm" v-for="item in val.description.selcard.split(',')"
								:key="item">{{item}}</text>
						</view>
					</view>
					<view class="flex w-[264rpx] h-[138rpx] border-solid border-[#E4F2FF]" v-else>
						<ImageBoxVue src="/static/community/tarot_card.png"></ImageBoxVue>
					</view>
				</view>
				<view class="flex items-center py-8" v-if="val.description.dsts">
					<text class="text-xs font-bold mx-10"
						:class="[val.description.dsts==0?'text-[#329EFF]':'text-[#FB1828]']">{{val.description.sinpay}}</text>
					<ImageBoxVue :src="val.description.dsts==0?'/static/icons/blue.png':'/static/icons/red.png'" width="28rpx"
						height="28rpx"></ImageBoxVue>
				</view>
				<view class="" v-if="val.description.describe">
					<text class="text-black">问题:</text>
					<text class="text-black">{{val.description.describe}}</text>
				</view>
			</view>

		</view>
		<view class="bg-white p-20 rounded-lg" v-if="val.data=='gift'">
			<view class="flex items-center">
				<text class="text-xs text-black">赠送价值</text>
				<text class="text-xs font-bold mx-10"
					:class="[val.description.dsts==0?'text-[#329EFF]':'text-[#FB1828]']">{{val.description.amount}}</text>
				<ImageBoxVue :src="val.description.dsts==0?'/static/icons/blue.png':'/static/icons/red.png'" width="28rpx"
					height="28rpx"></ImageBoxVue>
			</view>
			<view class="mt-10 p-10 rounded-md border-solid flex flex-col justify-center items-center overflow-hidden mb-10"
				style="border-color: #D7F0FF; border-width: 1px;">
				<ImageBoxVue :src="val.description.headimg" width="112rpx" height="108rpx"> </ImageBoxVue>
				<text class="text-sm text-black my-10">{{val.description.name}}</text>
				<view class="flex w-[300rpx] justify-between">
					<!-- <view class="flex w-[300rpx] justify-between" v-if="val.extension!=user.id"> -->
					<view class="bg-[#F1FAFF] flex justify-center w-[140rpx] p-10 rounded-full"
						@click="memberRefusegift(val.description,msgInfo)">
						<text class="text-[#5C7E95]">拒绝</text>
					</view>
					<view class="bg-[#329EFF] flex justify-center w-[140rpx] p-10 rounded-full"
						@click="memberRecgift(val.description,msgInfo)">
						<text class="text-[#fff]">接收</text>
					</view>
				</view>
				<view class="">
					<text
						class="text-black">{{val.description.receive!=1?val.description.receive!=2?'等待对方接收':'已被拒收':'已被接受'}}</text>
				</view>
			</view>
		</view>
		<view class="bg-white p-20 rounded-lg" v-if="val.data=='astrolabe'" @click="onAstrolabe(val.extension)">
			<view class="mb-30" v-for="e,i in astrolabe" :key="i">
				<view class=""><text class="text-black text-xs">姓名：</text><text class="text-black text-xs">{{e.nickname}}</text>
				</view>
				<view class=""><text class="text-black text-xs">性别：</text><text
						class="text-black text-xs">{{e.gender==0?'女':'男'}}</text> </view>
				<view class=""><text class="text-black text-xs">出生时间:</text><text
						class="text-black text-xs">{{dayjs(e.birthday).format('YYYY-MM-DD HH:mm:ss')}}</text>
				</view>
				<view class=""><text class="text-black text-xs">出生地：</text><text
						class="text-black text-xs">{{e.birthpro}},{{e.birthcity}},{{e.birthdis}}</text> </view>
				<view class=""><text class="text-black text-xs">居住地：</text><text
						class="text-black text-xs">{{e.respro}},{{e.rescity}},{{e.resdis}}</text> </view>
			</view>
			<view class="flex justify-center">
				<uv-image src="/static/astrolabe.png" width="150px" height="150px"></uv-image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import userApi from '../../../apis/apiList/userApi'
	import dayjs from 'dayjs'
	import msgApi from '../../../apis/apiList/msgApi'
	const addparmeList = uni.getStorageSync("addparme")
	const {
		val,
		msgInfo,
		tim
	} = defineProps(['val', 'msgInfo', 'tim'])
	const user = uni.getStorageSync('user')
	const emits = defineEmits(['lookImg', 'scrollToBottom'])
	const lookImg = e => {
		emits('lookImg', e)
	}
	const astrolabe = ref([])
	onMounted(() => {
		if (val.data == 'astrolabe') getDossierinfoByid()
	})
	const getDossierinfoByid = (id) => {
		const ids = val.extension.split(',')
		ids.forEach(a => {
			userApi.getDossierinfoByid({
				id: a
			}).then(res => {
				astrolabe.value.push(res.data)
				emits('scrollToBottom')
			})
		})
	}
	const playAudio = (val) => {
		let audioCtx = uni.createInnerAudioContext();
		audioCtx.src = val.description; // 在线音频地址
		console.log(audioCtx.src);
		audioCtx.play();
	}
	const handleClickTarot = (val) => {
		console.log(val)
		// return
		const type = val.description.sdes
		if (type != 0)
			uni.navigateTo({
				url: `/pages/test/card-spread2?id=${val.description.selectId}&deckId=${val.description.deckId}`
			})
	}
	//拒绝礼物 
	const memberRefusegift = async (val, val1) => {
		console.log(val, val1, val1.payload.description);
		// msgApi.memberRefusegift({
		// 	id: val.orderId
		// }).then(res => {
		modifyMessage(val, val1, 2)
		// })
	}

	//接收礼物 
	const memberRecgift = async (val, val1) => {
		modifyMessage(val, val1, 1)
		// msgApi.memberRecgift({
		// 	id: val.orderId
		// }).then(res => {

		// })

	}
	// 修改消息
	const modifyMessage = (val, val1, receive) => {
		let obj = JSON.parse(JSON.stringify(val1))
		const description = {
			...val,
			receive: receive
		}
		obj.payload.description = JSON.stringify(description)
		console.log(obj.payload.description, obj);
		tim.modifyMessage(obj).then(function(imResponse) {
			console.log(imResponse.data.message.payload, imResponse);
			// 修改消息成功，message 是最新的消息
		}).catch(function(imError) {
			// 修改消息失败
			console.log(imError);
		});
	}
	const editObj = (info) => {
		return {
			From_Account: info.from,
			To_Account: info.to,
			MsgKey: "",
			MsgBody: [{
				"MsgType": "TIMCustomElem",
				"MsgContent": {
					"Text": "hello"
				}
			}],
			CloudCustomData: ""
		}
	}
	// 跳转星盘
	const onAstrolabe = (ids) => {
		console.log(ids);
		const idsArr = ids.split(',')
		uni.navigateTo({
			url: `/pages/test/astrolabe?tab=${idsArr.length>1?0:4}&ids=${ids}`
		})
	}
</script>

<style>
	.item {
		&:nth-child(3n) {
			margin-right: 0;
		}

		&.active {
			color: #FF9562 !important;
		}
	}
</style>